<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js分页组件1.1</title>
<link href="${pageContext.request.contextPath}/js/tools/page/css/page.css" rel="stylesheet" type="text/css" />
<script src="${pageContext.request.contextPath}/js/jquery/jquery.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/tools/page/PageUtil.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
    pageLabel(1);
    rightOnePageLabel(1);
    rightOnePageTwoLabel(1);
    conciseOnePageTwoLabel(1);
});

////////////////////////////////默认样式[Table]
//传入显示信息的Id
var pageCustom = new Page("pageCustom", pageLabel, "detailInfoCustomDiv", "page_foot");
//设置批量操作的信息的字符串
pageCustom.batchOperate = "<a href='#'>删除</a>";
//设置开始字符串
//设置结束字符串
pageCustom.beginString = '<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table_page"><tr><td colspan="4" align="left">&nbsp;&nbsp;查询: <input type="text" name="queryName" value="${queryName}"/><input type="submit" value="查询"/></td></tr><tr><th>编号</th><th>标题</th><th>添加时间</th><th>操作</th></tr>';
pageCustom.endString = '<tr><td colspan="4"><div id="page_foot"></div></td></tr></table>';
pageCustom.pageSizeArr = [30, 40, 50];
pageCustom.size = 40;
//处理Page标签的函数
function pageLabel(_page) {
	if(_page != undefined) {
		pageCustom.page = _page;
	}
	jQuery.ajax({
		url : "${pageContext.request.contextPath}/PageServlet",
		data : {
				"page" : pageCustom.page,
				"size" : pageCustom.size
			},
		type : "POST",
		dataType : "json",
		async : true,
		beforeSend: function(){
			//提交处理的函数
			pageCustom.pageBeforeSend("<tr><td colspan='4'>加载信息中...</td></tr>");
		},
		error : function(json){
			pageCustom.pageError("<tr><td colspan='4'>加载信息出错了~</td></tr>");
		},
		//返回的是一个对象
		success : function(json){
			//处理数据列表的行信息
			function getResult(obj) {
				var result = "<tr><td>" + obj.id + "</td>";
				result += "<td>" + obj.title + "</td>";
				result += "<td>" + obj.addtime + "</td>";
				result += "<td><a href='#'>删除</a>";
				result += "</td></tr>";
				return result;
			}
			pageCustom.pageOperate(json, { resultFn : getResult, dataNull : "<tr><td>没有查找到数据!</td></tr>", pageFootStyle : pageCustom.pageStyle.defaultStyle });
		}
	});
}

////////////////////////////////向右靠样式[Table]
//传入显示信息的Id
var rightOnePageCustom = new Page("rightOnePageCustom", rightOnePageLabel, "rightOneDetailInfoCustomDiv", "rightOnePage_foot");
//设置批量操作的信息的字符串
rightOnePageCustom.batchOperate = "<a href='#'>删除</a>";
//设置开始字符串
rightOnePageCustom.beginString = "<table width='100%' border='0' cellpadding='0' cellspacing='0' class='table_page'><tr><th>编号</th><th>标题</th><th>添加时间</th><th>操作</th></tr>";
//设置结束字符串
rightOnePageCustom.endString = "</table>";
//处理Page标签的函数
function rightOnePageLabel(_page) {
	if(_page != undefined) {
		rightOnePageCustom.page = _page;
	}
	jQuery.ajax({
		url : "${pageContext.request.contextPath}/PageServlet",
		data : {
				"page" : rightOnePageCustom.page,
				"size" : rightOnePageCustom.size
			},
		type : "POST",
		dataType : "json",
		async : true,
		beforeSend: function(){
			//提交处理的函数
			rightOnePageCustom.pageBeforeSend("<tr><td colspan='4'>加载信息中...</td></tr>");
		},
		error : function(json){
			rightOnePageCustom.pageError("<tr><td colspan='4'>加载信息出错了~</td></tr>");
		},
		//返回的是一个对象
		success : function(json){
			//处理数据列表的行信息
			function getResult(obj) {
				var result = "<tr><td>" + obj.id + "</td>";
				result += "<td>" + obj.title + "</td>";
				result += "<td>" + obj.addtime + "</td>";
				result += "<td><a href='#'>删除</a>";
				result += "</td></tr>";
				return result;
			}
			rightOnePageCustom.pageOperate(json, { resultFn : getResult, dataNull : "<tr><td colspan='4'>没有查找到数据!</td></tr>", pageFootStyle : rightOnePageCustom.pageStyle.rightOneStyle });
		}
	});
}

////////////////////////////////向右靠样式[Div]
//传入显示信息的Id
var rightOnePageTwoCustom = new Page("rightOnePageTwoCustom", rightOnePageTwoLabel, "rightOneDetailInfoCustomTwoDiv", "rightOnePage_footTwo");
//设置批量操作的信息的字符串
rightOnePageTwoCustom.batchOperate = "<a href='#'>删除</a>";
//处理Page标签的函数
function rightOnePageTwoLabel(_page) {
	if(_page != undefined) {
		rightOnePageTwoCustom.page = _page;
	}
	jQuery.ajax({
		url : "${pageContext.request.contextPath}/PageServlet",
		data : {
		"page" : rightOnePageTwoCustom.page,
		"size" : rightOnePageTwoCustom.size
		},
		type : "POST",
		dataType : "json",
		async : true,
		beforeSend: function(){
			//提交处理的函数
			rightOnePageTwoCustom.pageBeforeSend("<tr><td colspan='4'>加载信息中...</td></tr>");
		},
		error : function(json){
			rightOnePageTwoCustom.pageError("<tr><td colspan='4'>加载信息出错了~</td></tr>");
		},
		//返回的是一个对象
		success : function(json){
			//处理数据列表的行信息
			function getResult(obj) {
				var result = "<tr><td>" + obj.id + "</td>";
				result += "<td>" + obj.title + "</td>";
				result += "<td>" + obj.addtime + "</td>";
				result += "<td><a href='#'>删除</a>";
				result += "</td></tr>";
				return result;
			}
			rightOnePageTwoCustom.pageOperate(json, { resultFn : getResult, dataNull : "<tr><td colspan='4'>没有查找到数据!</td></tr>", pageFootStyle : rightOnePageTwoCustom.pageStyle.rightOneStyle });
		}
	});
}

////////////////////////////////简单样式1
//传入显示信息的Id
var conciseOnePageTwoCustom = new Page("conciseOnePageTwoCustom", conciseOnePageTwoLabel, "conciseOneCustomTwoDiv", "conciseOnePage_footTwo");
conciseOnePageTwoCustom.size = 1;
//设置批量操作的信息的字符串
conciseOnePageTwoCustom.batchOperate = "直接将以上信息发送到手机";
//处理Page标签的函数
function conciseOnePageTwoLabel(_page) {
	if(_page != undefined) {
		conciseOnePageTwoCustom.page = _page;
	}
	jQuery.ajax({
		url : "${pageContext.request.contextPath}/PageServlet",
		data : {
			"page" : conciseOnePageTwoCustom.page,
			"size" : conciseOnePageTwoCustom.size
		},
		type : "POST",
		dataType : "json",
		async : true,
		beforeSend: function(){
			//提交处理的函数
			conciseOnePageTwoCustom.pageBeforeSend("<tr><td colspan='4'>加载信息中...</td></tr>");
		},
		error : function(json){
			conciseOnePageTwoCustom.pageError("<tr><td colspan='4'>加载信息出错了~</td></tr>");
		},
		//返回的是一个对象
		success : function(json){
			//处理数据列表的行信息
			function getResult(obj) {
				var result = "<em>" + obj.title + "</em>";
				return result;
			}
			conciseOnePageTwoCustom.pageOperate(json, { resultFn : getResult, dataNull : "<tr><td colspan='4'>没有查找到数据!</td></tr>", pageFootStyle : conciseOnePageTwoCustom.pageStyle.conciseOneStyle });
		}
	});
}
</script>
</head>
<body>

	<h1>PageUtil的使用</h1>
	<hr>
	<h3>Table用法[page在table内]-默认样式</h3>
  	<!-- 生成Page标签版本 -->
  	<div id="detailInfoCustomDiv"></div>
	<hr>
	<h3>Table用法[page不在table内]-向右靠样式1</h3>
	<div id="rightOneDetailInfoCustomDiv"></div>
	<div id="rightOnePage_foot"></div>
	<hr>
	<h3>Div用法-向右靠样式1</h3>
	<div id="rightOneDetailInfoCustomTwoDiv"></div>
	<div id="rightOnePage_footTwo"></div>
	<hr>
	<h3>简单样式用法-简单样式1</h3>
	<div id="conciseOneCustomTwoDiv"></div>
	<div id="conciseOnePage_footTwo"></div>
</body>
</html>